<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'element-ui'
import ProjectDetailTable from '@/views/project-update/inventory-review/project-inventory/detail-table.vue'
import { getHistoryInfo } from '@/api/project-update/apply'

const userLevel = JSON.parse(localStorage.getItem('user') || '{}')?.user
  ?.roleLevel

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '历史版本',
  },
  id: {
    type: String,
    default: '',
  },
  time: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['closeDialog'])

const closeDialog = (flag) => {
  emit('closeDialog')
}

const detailTableRef = ref()

const handleDialogOpen = () => {
  // console.log('handleDialogOpen')
  if (!props.id) return
  getHistoryInfo({
    projectId: props.id,
    date: props.time,
  }).then((res) => {
    if (res.success) {
      const { plProjectHistory, planHistoryList, resourceHistoryList } =
        res.data
      const data = {
        ...plProjectHistory,
        plProjectResouceList: resourceHistoryList,
        plProjectPlanList: planHistoryList,
      }
      detailTableRef.value.inputData(data)
      // detailTableRef.value.setTableData(res.data)
    } else {
      Message.error(res.message)
    }
  })
}
</script>

<template>
  <el-dialog
    :visible="visible"
    :title="title"
    class="change-log-special-dialog"
    align-center
    :append-to-body="true"
    @opened="handleDialogOpen"
    @close="closeDialog"
    width="70%"
  >
    <project-detail-table
      ref="detailTableRef"
      :disabled="true"
      :user-level="userLevel"
    />
  </el-dialog>
</template>

<style lang="scss">
.change-log-special-dialog {
  .el-dialog__body {
    max-height: 600px !important;
    overflow-y: auto;
  }
}
</style>
